<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          退件编号：<a-input
          :maxLength="128"
            v-model="searchData.applyCode"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          运单号：<a-input :maxLength="128" v-model="searchData.waybillNm" style="width: 60%" />
        </a-col>
        <a-col :span="6">
          退至仓库：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehousingId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in warehouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getServeTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            创建时间：<a-range-picker
              v-model="acTime"
              @change="onStartDateChange"
              style="width: 60%"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getServeTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        :columns="columns"
        :data-source="tabList"
        :pagination="false"
        :scroll="{ x: 1500 }"
      >
        <!-- 运单信息 -->
        <div slot="logisticsInfos" slot-scope="text, record">
          <div
            v-for="item in record.logisticsInfos"
            :key="item.id"
            class="logisticsInfos"
          >
            <span>
              {{ item.logisticsName }}
            </span>

            <span>
              {{ item.waybillNm }}
            </span>
          </div>
        </div>
        <!-- //备注 -->
        <div slot="remark" slot-scope="text, record">
          {{
            record.remark === null || record.remark === ""
              ? "暂无"
              : record.remark
          }}
        </div>
        <!-- 、、创建时间 -->
        <div slot="createTime" slot-scope="text, record">
          {{
            record.createTime === null || record.createTime === ""
              ? "暂无"
              : record.createTime.replace("T", " ")
          }}
        </div>
        <!-- 状态 -->
        <div slot="retreatState" slot-scope="text, record">
          <span
            :style="
              record.retreatState === '取消入库'
                ? 'color:red;'
                : 'color:#3eae7c;'
            "
          >
            {{ record.retreatState }}
          </span>
        </div>
        <!-- 操作 -->
        <span slot="action" class="action" slot-scope="text, record">
          <a class="action" @click="editRow(record, 'serve', 'info')"
            >审核账单</a
          >
          <a />
        </span>
      </a-table>
    </a-spin>

    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <AddreturnModal
      port="clientSide"
      retreatState="600"
      :getServeTableList="getServeTableList"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import AddreturnModal from "@/components/clientSide/Returns/AddreturnModal.vue";
import {
  by_retreatApply_Info,
  by_retreatApply_pageApply,
} from "@/apis/clientSide/ReturnsList/ReturnsList";
export default {
  components: {
    AddreturnModal,
  },
  created() {
    this.getServeTableList();
  },
  data() {
    return {
      tabList: [],
      acTime: null,
      expand: false,
      total: 1,
      searchData: {
        current: 1,
        retreatType: 0,
        size: 10,
        retreatState: "600",
        applyCode: null,
        waybillNm: null,
        warehousingId: null,
        startDate: null,
        endtDate: null,
      },
    };
  },
  methods: {
    //时间查询
    onStartDateChange(date, dateString) {
      this.searchData.startDate = dateString[0];
      this.searchData.endtDate = dateString[1];
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getServeTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getServeTableList();
    },
    resetSearch() {
      this.searchData.waybillNm = null;
      this.searchData.applyCode = null;
      this.searchData.warehousingId = null;
      this.searchData.startDate = null;
      this.searchData.endtDate = null;
      this.acTime = null;
      this.getServeTableList();
    },
    async editRow(record, flag, show) {
      let { code, responseBody } = await by_retreatApply_Info(record.id);
      if (code === "200") {
        setTimeout(() => {
          this.$bus.$emit("retreatApply_Info", responseBody, flag, show);
        }, 1);
      }
    },
    async getServeTableList() {
      this.spinning = true;
      let { code, responseBody } = await by_retreatApply_pageApply(
        this.searchData
      );
      if (code === "200") {
        this.tabList = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  computed: {
    ...mapState(["warehouse"]),
    columns() {
      return [
        {
          title: "客户编号",
          width: "8%",
          dataIndex: "tenantId",
          key: "tenantId",
          // scopedSlots: { customRender: "key" },
          align: "center",
        },
        {
          title: "退件编号",
          width: "8%",
          dataIndex: "applyCode",
          key: "applyCode",
          // scopedSlots: { customRender: "key" },
          align: "center",
        },
        {
          title: "退件标题",
          dataIndex: "title",
          key: "title",
          width: "10%",
          scopedSlots: { customRender: "title" },
          align: "center",
        },

        {
          title: "退至仓库",
          dataIndex: "warehousingName",
          key: "warehousingName",
          width: "8%",
          //  scopedSlots: { customRender: "logisticsInfos" },
          align: "center",
          // ellipsis: true,
        },
        {
          title: "退件处理",
          dataIndex: "typeName",
          key: "typeName",
          width: "10%",
          align: "center",
        },
        {
          title: "退货物流/运单号",
          dataIndex: " logisticsInfos",
          key: " logisticsInfos",
          width: "15%",
          scopedSlots: { customRender: "logisticsInfos" },
          align: "center",
        },
        {
          title: "运单数",
          dataIndex: "waybillNo",
          key: "waybillNo",
          width: "6%",
          //   width: "12%",
          scopedSlots: { customRender: "waybillNo" },
          align: "center",
        },

        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          // width: '6%',
          width: "8%",
          scopedSlots: { customRender: "createTime" },
          align: "center",
        },
        {
          title: "备注",
          dataIndex: "remark",
          key: "remark",
          // width: '6%',
          width: "12%",
          scopedSlots: { customRender: "remark" },
          align: "center",
        },
        {
          title: "状态",
          dataIndex: "retreatState",
          key: "retreatState",
          scopedSlots: { customRender: "retreatState" },
          // width: '6%',
          width: "12%",
          align: "center",
        },
        {
          title: "操作",
          key: "operation",
          width: 180,
          // width: '%',
          fixed: "right",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.logisticsInfos {
  display: flex;
  justify-content: space-around;
  margin: 5px 0;
  align-items: center;
  span {
    flex: 1;
  }
  span:nth-child(1) {
    border-radius: 5px;
    background: #027db4;
    color: #fff;
    flex: 1;
  }
  span:nth-child(2) {
    color: #027db4;
    text-decoration: underline;
    flex: 1;
  }
}
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
.action {
  a {
    border-bottom: 1px solid rgb(41, 41, 224);
    color: rgb(41, 41, 224);
  }
}
</style>